<template>
    <view class="globe_back">
        <view class="box">
            <view class="f_40 fw_bold">售后处理中，请耐心等待</view>
            <view v-if="type == 1" class="f_40 fw_bold">售后处理完成，感谢您的使用</view>
            <view class="back_fff list">
                <view class="flex justify_content_between pt_24">
                    <view class="round"></view>
                    <view class="title">上门检修故障</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff"></view>
                    <view class="title">
                        <view class="address">贵阳市南明区花果园金融街一号老凤祥贵阳市南明区花果园金融</view>
                        <view>
                            <text class="name">王先生</text>
                            <text class="iphone">156****5412</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 详情 -->
            <view class="detailedBox">
                <view class="flex justify_content_between detailed">
                    <view>售后原因</view>
                    <view>不需要了</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>退款金额</view>
                    <view>￥200.05</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>退款方式</view>
                    <view>原路退回</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>申请时间</view>
                    <view>2022-02-12 20:30</view>
                </view>
                <view v-if="type == 1" class="flex justify_content_between detailed">
                    <view>退款时间</view>
                    <view>2022-02-12 20:30</view>
                </view>
            </view>
            <!-- 描述评价 -->
            <view class="detailedBox">
                <view class="title">描述评价</view>
                <view class="info">描述评价描述评价描述评价描述评价</view>
                <view class="infoImgBox">
                    <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image>
                    <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image>
                    <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { common } from '@/common/serve.js';
export default {
    data() {
        return {
            url: '',
            count: 5,
            value: 5,
            images: [],
            maxImagesNum: 6,
            type: 0 //0售后中，1售后完成
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    methods: {
        // 删除现场照片
        deletephotos(i) {
            this.images.splice(i, 1);
        },
        // 现场照片
        async instoreImages() {
            let images = this.images;
            let num = this.maxImagesNum - images.length; //图片长度

            const result = await common.chooseImage(num).catch((err) => console.log('chooseImageErrMsg:', err));
            const suceessList = (result || []).filter((item) => item.isSuccess === true);
            if (suceessList.length > 0) {
                suceessList.map((item) => {
                    images.push(item.path);
                });

                this.images = images;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
    .list {
        padding: 24rpx;
        border-radius: 24rpx;
        margin-top: 24rpx;
        .round {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #00091a;
            font-size: 28rpx;
            margin-top: 16rpx;
        }
        .type {
            color: #3377ff;
            font-weight: bold;
        }
        .time {
            color: #ccced1;
        }
        .title {
            width: 90%;
            color: #00091a;
            font-size: 32rpx;
            font-weight: bold;
        }
        .address {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .name {
            font-weight: normal;
            color: #333a47;
            margin-right: 24rpx;
        }
        .iphone {
            font-weight: normal;
            color: #999ca3;
        }
        .money {
            text-align: right;
            color: #666b75;
        }
        .money text {
            color: #ff6401;
            font-weight: bold;
            font-size: 32rpx;
        }
        .btn {
            text-align: right;
        }
        .cance {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #666b75;
            text-align: center;
            border: 2rpx solid #ccced1;
            margin-top: 24rpx;
        }
        .buy {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #ffffff;
            text-align: center;
            background: #3377ff;
            margin-left: 24rpx;
            margin-top: 24rpx;
        }
    }

    .store {
        padding: 24rpx;
        background: white;
        border-radius: 24rpx;
        margin-top: 30rpx;
    }
    .storeImg {
        width: 96rpx;
        height: 96rpx;
        border-radius: 16rpx;
        margin-right: 16rpx;
    }
    .storeTitle {
        color: #00091a;
        font-size: 32rpx;
        margin-bottom: 8rpx;
    }
    .address {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 0 auto;
    }
    .addressText {
        color: #999ca3;
        font-size: 24rpx;
    }
    .salesVolume {
        color: #999ca3;
        font-size: 28rpx;
    }
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.img_add {
    width: 140rpx;
    height: 140rpx;
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.star {
    width: 48rpx;
    height: 48rpx;
}
.starTitle {
    padding-right: 48rpx;
}
.couponBtn {
    margin: 24rpx auto;
    width: 686rpx;
    height: 100rpx;
    border-radius: 24rpx;
    background: #3377ff;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
}
.starText {
    margin-left: 16rpx;
    font-size: 32rpx;
    color: #ff6401;
    font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
}
.coupon,
.detailedBox {
    background: white;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-top: 24rpx;
}
.detailed {
    color: #333a47;
    font-size: 28rpx;
    margin-bottom: 32rpx;
}
.title {
    font-size: 28rpx;
    color: #333a47;
}
.info {
    font-size: 28rpx;
    color: #00091a;
    margin-top: 32rpx;
}
.infoimg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
    margin: 24rpx 12rpx;
}
</style>
